<template>
  <view class="container">

    <!-- end 头部菜单 -->
    <view class="main">
      <view v-if="list.length==0" class="empty">
        您还没有发布任何二手手机
      </view>
      <!-- 订单列表 -->
      <block v-for="(item, index) in list" :key="index">
        <view class="prod-item">
          <!-- 商品列表 -->
          <view>
            <view class="item-cont" :data-goodsId="item.id" @tap="toGoodsPage">
              <view class="prod-pic">
                <image :src="item.picture" />
              </view>
              <view class="prod-info">
                <view class="prodname">
                  {{ item.title }}
                </view>
                <view class="prod-info-cont">
                  {{ item.storage }}
                </view>
                <view class="price-nums">
                  <text class="prodprice">
                    <text class="symbol">
                      ￥
                    </text>
                    <text class="big-num">
                      {{ wxs.parsePrice(item.price)[0] }}
                    </text>
                    <text class="small-num">
                      .{{ wxs.parsePrice(item.price)[1] }}
                    </text>
                  </text>

                </view>
              </view>
            </view>
          </view>

          <!-- end 商品列表 -->
          <view class="prod-foot">
            <view class="btn">
              <text  class="button" :data-goodsId="item.id"  hover-class="none" @tap="editGoods">
                编辑
              </text>
              <text v-if="item.status==0" class="button" :data-goodsId="item.id" :data-status="item.status"
                hover-class="none" @tap="openPopup">
                上架
              </text>
              <text v-if="item.status==1" class="button" :data-goodsId="item.id" :data-status="item.status"
                hover-class="none" @tap="openPopup">
                下架
              </text>
              <text class="button warn" :data-goodsId="item.id" hover-class="none" @tap="openDelPopup">
                删除
              </text>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
  <!-- end 订单列表 -->

  <view>
    <!-- 上下架弹窗 -->
    <uni-popup ref="popupDialog" type="dialog">
      <uni-popup-dialog type="info" :title="popupTitle" @confirm="updateMyGoods"></uni-popup-dialog>
    </uni-popup>
    <!-- 删除弹窗 -->
    <uni-popup ref="delPopupDialog" type="dialog">
      <uni-popup-dialog type="info" title="确定要删除吗？" @confirm="delGoods"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup>
  import {
    ref,
    getCurrentInstance
  } from 'vue';
  const wxs = number()

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad((options) => {
    loadOrderData(0, 1)
  })

  let current = 1
  let pages = 0
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom(() => {
    if (current < pages / 10) {
      loadOrderData(current + 1)
    } else {
      uni.showToast({
        title: '没有更多了',
        icon: 'none'
      })
    }
  })

  const list = ref([])
  /**
   * 加载订单数据
   */
  const loadOrderData = (current) => {
    uni.showLoading() // 加载订单列表
    http.request({
        url: '/goods/getMyGoods',
        method: 'GET',
        data: {
          current: current,
        }
      })
      .then(({
        data
      }) => {
        console.log("商品数据");
        console.log(data);
        let listParam = []
        if (data.current === 1) {
          listParam = data.records
        } else {
          listParam = list.value
          Array.prototype.push.apply(listParam, data.records)
        }
        list.value = listParam
        pages = data.pages
        current = data.current
        uni.hideLoading()
      })
  }



  const {
    proxy
  } = getCurrentInstance()
  const popupDialog = ref(null)
  const popupTitle = ref('')
  let goodsId = ''
  let status = ''
  /**
   * 开启弹窗
   */
  const openPopup = (e) => {
    goodsId = e.currentTarget.dataset.goodsId
    status = e.currentTarget.dataset.status
    console.log("打开弹窗");
    console.log(goodsId);
    console.log(status);
    popupTitle.value = status == 1 ? '是否要下架该二手手机' : '是否要上架该二手手机'
    proxy.$refs.popupDialog.open()
  }

  let editGoodsId=''
  //跳转到编辑页
  const editGoods=(e)=>{
    editGoodsId = e.currentTarget.dataset.goodsId
    console.log("跳转到编辑页");
    console.log(editGoodsId);
    //跳转到编辑页
    uni.navigateTo({
      url:'/pages/edit/edit?goodsId='+editGoodsId
    })
  }

  /**
   * 上下架
   *
   */
  const updateMyGoods = () => {
    let updateUrl = ''
    if (status == 1) {
      updateUrl = '/goods/soldOut?goodsId=' + goodsId
    } else {
      updateUrl = '/goods/soldIn?goodsId=' + goodsId
    }
    console.log("上下架");
    console.log(goodsId);
    console.log(status);
    http.request({
      url: updateUrl,
      method: 'PUT',
    }).then((res) => {
      console.log(res);
      if (res.code == 1) {
        uni.showToast({
          icon: "success",
          title: res.msg
        })
        proxy.$refs.popupDialog.close()
        loadOrderData(current)
      } else {
        uni.showToast({
          icon: "error",
          title: res.msg
        })
      }
    })

  }

  let delGoodsId = ''
  //打开删除弹窗
  const openDelPopup = (e) => {
    delGoodsId = e.currentTarget.dataset.goodsId
    console.log(delGoodsId);
    proxy.$refs.delPopupDialog.open()
  }

  const delGoods = () => {
    console.log("删除");
    console.log(delGoodsId);
    http.request({
        url: '/goods/delete?goodsId=' + delGoodsId,
        method: 'DELETE',
      })
      .then((res) => {
        console.log(res);
        if (res.code == 1) {
          uni.showToast({
            icon: "success",
            title: res.msg
          })
          proxy.$refs.delPopupDialog.close()
          loadOrderData(current)
        } else {
          uni.showToast({
            icon: "error",
            title: res.msg
          })
        }
      })
  }

  /**
   * 进入二手手机详情
   */
  const toGoodsPage = (e) => {
    uni.navigateTo({
      url: '/pages/prod/prod?goodsId=' + e.currentTarget.dataset.goodsId
    })
  }
</script>

<style scoped lang="scss">
  @use './myGoods.scss';
</style>
